<template>
  <div class="support-page">
    <Header />
    <el-image :src="supportData.banner" lazy class="support-banner" />
    <div class="support-wrap">
      <el-tabs
        v-model="tabIndex"
        v-loading="loading"
        class="demo-tabs"
        element-loading-text="Loading..."
        element-loading-svg-view-box="-10, -10, 50, 50"
        element-loading-background="rgba(0,0,0, 0)"
        @tab-click="handleClick"
      >
        <el-tab-pane :label="supportData.faq_title_show" :name="1">
          <div class="support-faq-wrap">
            <div class="faq-wrap-list">
              <a
                v-for="v in list"
                :key="v.id"
                :href="`/support/faqDetail?id=${v.id}`"
                target="_blank"
                class="faq-wrap-item"
              >
                <div style="width: 950px">
                  {{ v.ask }}
                </div>
                <img src="@img/arr-left1.png" class="arr-left1" />
              </a>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="supportData.download_title_show" :name="2">
          <div class="support-faq-wrap">
            <div class="faq-wrap-list">
              <div
                v-for="v in list"
                :key="v.id"
                class="faq-wrap-item"
                @click="supportDownload(v.id)"
              >
                <div style="width: 950px">
                  {{ v.name }}
                </div>
                <img src="@img/download.png" class="arr-left1" />
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div
      v-if="total > limit"
      class="flex align-center space-center support-pagination"
    >
      <el-pagination
        v-model:current-page="page"
        background
        layout="prev, pager, next"
        :default-page-size="limit"
        :total="total"
        @current-change="currentChange"
      />
    </div>
    <Footer />
  </div>
</template>
<script setup>
import { onMounted } from 'vue'
import Footer from '@/components/Footer.vue'
import Header from '@/components/Header.vue'

const { $apiFetch } = useNuxtApp()
const { state } = usePageData()
const route = useRoute()
const page = ref(1)
const loading = ref(false)
const limit = 10
const tabIndex = ref(route.query.type == 'download' ? 2 : 1)
const supportData = useState('support-data', () => ({
  faq: {},
  download: {},
  faq_title_show: '',
  download_title_show: '',
  banner: '',
}))

const getParams = () => {
  return {
    lang: state.value.language,
    limit,
    page: page.value,
  }
}

const list = computed(() => {
  if (tabIndex.value == 1) {
    return supportData.value.faq.list
  }
  return supportData.value.download.list
})

const total = computed(() => {
  if (tabIndex.value == 1) {
    return supportData.value.faq.count
  }
  return supportData.value.download.count
})

const { data, error } = await useAsyncData('support-data', () =>
  $apiFetch(`/support/faq`, {
    method: 'GET',
    params: getParams(),
  }),
)
if (!error.value) {
  supportData.value.faq = data.value.data
  supportData.value.faq_title_show = data.value.data.faq_title_show
  supportData.value.download_title_show = data.value.data.download_title_show
  supportData.value.banner = data.value.data.banners[0]?.image
}

const getFaqData = async () => {
  loading.value = true
  const res = await $apiFetch(`/support/faq`, {
    method: 'GET',
    params: getParams(),
  })
  loading.value = false
  supportData.value.faq = res.data
  supportData.value.faq_title_show = res.data.faq_title_show
  supportData.value.download_title_show = res.data.download_title_show
}

const getDownloadData = async () => {
  loading.value = true
  const res = await $apiFetch(`/support/download/list`, {
    method: 'GET',
    params: getParams(),
  })
  loading.value = false
  supportData.value.download = res.data
  supportData.value.faq_title_show = res.data.faq_title_show
  supportData.value.download_title_show = res.data.download_title_show
}

const currentChange = () => {
  if (tabIndex.value == 1) {
    getFaqData()
    return
  }
  getDownloadData()
}

const handleClick = () => {
  page.value = 1
  currentChange()
}

const supportDownload = async (id) => {
  window.open(`/api/support/download?id=${id}`)
}

onMounted(() => {
  if (route.query.type == 'download') {
    tabIndex.value = 2
    getDownloadData()
  } else {
    getFaqData()
  }
})
</script>
<style lang="scss">
.support-page {
  background: #171a26;
  .support-pagination {
    margin-top: 72px;
    margin-bottom: 100px;
  }
  .support-banner {
    min-height: 100%;
    max-height: 100%;
    width: 100%;
  }
}
.support-faq-wrap {
  .faq-wrap-list {
    min-height: 800px;
  }
  .faq-wrap-item {
    color: #fff;
    font-weight: 500;
    font-size: 16px;
    padding: 24px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    cursor: pointer;
  }
  .arr-left1 {
    width: 32px;
    height: 32px;
  }
}
.support-wrap {
  width: 1000px;
  margin: 0 auto;
  margin-top: 44px;
  // margin-top: 44px;
  .el-tabs__header {
    margin-bottom: 0px;
  }
}
.el-tabs__item {
  font-weight: 800;
  font-size: 24px;
  flex: 1;
  color: rgba(255, 255, 255, 0.4);
  padding-bottom: 9px;
  &:hover {
    color: #fff;
  }
}
.el-tabs__item.is-active {
  color: #fff;
  font-weight: 800;
}
.el-tabs__active-bar {
  background: #fff;
  height: 4px;
}
.el-tabs__nav-wrap:after {
  height: 1px;
  background: rgba(255, 255, 255, 0.6);
}
.el-tabs__header {
  margin-bottom: 44px;
}
.el-tabs__item {
  font-weight: 800;
  font-size: 24px;
  flex: 1;
  color: rgba(255, 255, 255, 0.4);
  padding-bottom: 9px;
  &:hover {
    color: #fff;
  }
}
.el-tabs__item.is-active {
  color: #fff;
  font-weight: 800;
}
.el-tabs__active-bar {
  background: #fff;
  height: 4px;
}
.el-tabs__nav-wrap:after {
  height: 1px;
  background: rgba(255, 255, 255, 0.6);
}
.el-tabs__nav {
  width: 100%;
}
</style>
